<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<head>
<style>
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}
      
div.gallery:hover {
    border: 1px solid #777;
}
      
div.gallery img {
    width: 100%;
    height: auto;
}
      
div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
    <a target="_blank" href="../图片/src=http---5b0988e595225.cdn.sohucs.com-images-20171227-5ce1f55cad974b6db436b827c534b303.jpeg&refer=http---5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg.jpg">
    <img src="../w3logo-1.png" alt="Cinque Terre" width="600" height="400">
</a>
    <div class="desc">在此处添加图像描述</div>
</div>
      
    <div class="gallery">
    <a target="_blank" href="../图片/eg_merglobe.gif">
    <img src="../图片/eg_planets.jpg" alt="Forest" width="600" height="400">
</a>
    <div class="desc">在此处添加图像描述</div>
</div>
      
    <div class="gallery">
    <a target="_blank" href="../图片/eg_sun.gif">
    <img src="../图片/WechatIMG2.jpeg" alt="Northern Lights" width="600" height="400">
</a>
    <div class="desc">在此处添加图像描述</div>
</div>
      
    <div class="gallery">
    <a target="_blank" href="../图片/WechatIMG3.jpeg">
    <img src="../图片/WechatIMG4.jpeg" alt="Mountains" width="600" height="400">
</a>
    <div class="desc">在此处添加图像描述</div>
</div>
</body>
</html>